/**
使用示例：
<script type="text/javascript" src="./js/toast.js"></script>


<div onclick="showToast('hello toast!')">show toast</div>

*/
var body = document.getElementsByTagName("body")[0];
var toastNode = null;
var toastTask = -1;
function showToast(msg){
    if (toastNode === null) {
        toastNode=document.createElement("text")
        /*根据需求修改样式*/
        toastNode.style.textAlign="center";
        toastNode.style.position="absolute";
        toastNode.style.top="45%";
        toastNode.style.color="white";
        toastNode.style.left= "45%";
        toastNode.style.borderRadius= "10px";
        toastNode.style.padding= "10px";
        toastNode.style.backgroundColor= "#777777";
        toastNode.style.transitionDuration= "100ms";
    }
    
    if (toastNode.innerText.length !== msg.length) {
        toastNode.innerText = msg; 
        let width = 10 * msg.length;
        toastNode.style.width= width + "px";
        toastNode.style.left = (screen.width -width)/2 + "px";
    } else if (toastNode.innerText !== msg) {
        toastNode.innerText = msg; 
    }
    if (!body.contains(toastNode)) {
        body.appendChild(toastNode);
    }
    if (toastTask !== -1) {
        clearTimeout(toastTask);
    }
    toastTask = setTimeout(function(){
        body.removeChild(toastNode);
        toastTask = -1;
        toastNode.innerText = "";
    }, 3000)

    currentMsg = msg;
}